<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				/*
		     * 将边框设置在中间
		     */
				align-items: center;
				justify-content: center;
			}

			canvas {
				width: 500px;
				height: 500px;
				border: 1px solid #333333;
		</style>
	</head>
	<body>
		<div class="container">
			<canvas id="canvas" width="500px" height="500px"></canvas>
			<div>
				<input type="button" value="笔" id="bi" />
				<input type="button" value="实心矩形" id="sxjx" />
				<input type="button" value="实心圆" id="sxy" />
				<input type="button" value="空心矩形" id="kxjx" />
				<input type="button" value="空心圆" id="kxy" />
			</div>
		</div>
	</body>
	<script>
		window.onload = function() {
			let oCanvas = document.getElementById('canvas');
			let oPen = oCanvas.getContext("2d");
			
			let oBi = document.getElementById('bi');
			oBi.onclick = function(){
				document.onmousedown = function(e){
				x0 = (e.pageX - oCanvas.offsetLeft);
				y0 = (e.pageY - oCanvas.offsetTop);
				
				document.onmousemove = function(e){
					x1=(e.pageX - oCanvas.offsetLeft);
					y1=(e.pageY - oCanvas.offsetTop);
					
					oPen.beginPath();
					oPen.moveTo(x0, y0);
            		oPen.lineTo(x1, y1);
            		oPen.lineWidth = 5;
            		oPen.strokeStyle = "aqua";
            		oPen.stroke();
            		oPen.closePath();
            		
            		x0 = x1;
                	y0 = y1;
					}
				}
				document.onmouseup = function(){
					document.onmousemove = null;
				}
			}
			
			
			
			let oSxjx = document.getElementById('sxjx');
			oSxjx.onclick = function(){
				document.onmousedown = function(e){
				x0 = (e.pageX - oCanvas.offsetLeft);
				y0 = (e.pageY - oCanvas.offsetTop);
				
				document.onmousemove = function(e){
					x1=(e.pageX - oCanvas.offsetLeft);
					y1=(e.pageY - oCanvas.offsetTop);
					
            		oPen.clearRect(0,0,500,500);
            		oPen.beginPath();
					oPen.fillRect(x0,y0,x1-x0,y1-y0);
					oPen.closePath();
            		oPen.stroke();
					}
				}
				document.onmouseup = function(){
					
					document.onmousemove = null;
				}
			}
			
			
			let oSxy = document.getElementById('sxy');
			oSxy.onclick = function(){
				document.onmousedown = function(e){
				x0 = (e.pageX - oCanvas.offsetLeft);
				y0 = (e.pageY - oCanvas.offsetTop);
				
				document.onmousemove = function(e){
					x1=(e.pageX - oCanvas.offsetLeft);
					y1=(e.pageY - oCanvas.offsetTop);
					

					oPen.beginPath();
					
					oPen.arc(x0,y0,x1-x0, 0,Math.PI*2, true);
					
            		oPen.stroke();
            		oPen.closePath();
            		
            		
					}
				}
				document.onmouseup = function(){
					oPen.fill();
					document.onmousemove = null;
				}
			}
			
			
			let oKxjx = document.getElementById('kxjx');
			oKxjx.onclick = function(){
				document.onmousedown = function(e){
				x0 = (e.pageX - oCanvas.offsetLeft);
				y0 = (e.pageY - oCanvas.offsetTop);
				
				document.onmousemove = function(e){
					x1=(e.pageX - oCanvas.offsetLeft);
					y1=(e.pageY - oCanvas.offsetTop);
					
					oPen.clearRect(0,0,500,500);
					oPen.beginPath();
					oPen.strokeRect(x1,y1,x0-x1,y0-y1);

            		
            		
            		oPen.closePath();
            		


					}
				}
				document.onmouseup = function(){
					document.onmousemove = null;
				}
			}
			
			let oKxy = document.getElementById('kxy');
			oKxy.onclick = function(){
				document.onmousedown = function(e){
				x0 = (e.pageX - oCanvas.offsetLeft);
				y0 = (e.pageY - oCanvas.offsetTop);
								
				}
				document.onmousemove = function(e){
					x1=(e.pageX - oCanvas.offsetLeft);
					y1=(e.pageY - oCanvas.offsetTop);
					
					oPen.clearRect(0,0,500,500);
					oPen.beginPath();
					
					oPen.arc(x0,y0,x1-x0, 0,Math.PI*2, true);
            		oPen.stroke();
            		oPen.closePath();
            		
            		
					}
				document.onmouseup = function(){
					document.onmousemove = null;
				}
			}
			
				
			
		}
	</script>
</html>
